<template>
  <view class="invoice-pop">
    <u-popup
      :show="showFapiao"
      mode="bottom"
      @close="showFapiao = false"
      :safeAreaInsetBottom="true"
      width="100%"
      border-radius="24">
      <view class="invoice-ctx fapiao-poup">
        <view class="title">申请发票</view>
        <view class="fapiao-type">
          <text>发票类型</text>
          <text>开具发票在个人中心-我的发票查看</text>
        </view>
        <view class="type-list">
          <view
            class="type-item"
            :class="params.invoiceStatus == 0 ? 'active' : ''"
            @click="params.invoiceStatus = 0">
            不开票
          </view>
          <view
            class="type-item"
            :class="
              params.invoiceStatus == 1 && params.invoiceType == 1
                ? 'active'
                : ''
            "
            @click="pupiaoClick">
            普通发票
          </view>
          <view
            class="type-item"
            :class="
              params.invoiceStatus == 1 && params.invoiceType == 2
                ? 'active'
                : ''
            "
            @click="zhuanpiaoClick">
            专用发票
          </view>
        </view>

        <block v-if="params.invoiceStatus == 1">
          <view class="fapiao-taitou">发票抬头</view>
          <view class="taitou-box">
            <view
              class="taitou"
              v-if="params.invoiceType == 1"
              @click="typeChange(1)"
              :class="params.titleType == 1 ? 'active' : ''">
              个人
            </view>
            <view
              class="taitou"
              @click="typeChange(2)"
              :class="params.titleType == 2 ? 'active' : ''">
              单位
            </view>
          </view>
          <view class="personal" v-if="params.titleType == 1">
            <text>个人名称</text>
            <input
              v-model="params.title"
              placeholder="请填写“个人”或您的姓名"
              placeholder-class="place" />
          </view>
          <view class="company" v-if="params.titleType == 2">
            <view class="company-item">
              <view>单位名称</view>
              <input
                v-model="params.title"
                placeholder="请填写单位名称"
                placeholder-class="place" />
            </view>
            <view class="company-item">
              <view>纳税人识别码</view>
              <input
                v-model="params.shibiema"
                placeholder="请填写纳税人识别码"
                placeholder-class="place" />
            </view>
            <view class="company-item" v-if="params.invoiceType == 2">
              <view>注册地址</view>
              <input
                v-model="params.companyAddress"
                placeholder="请填写注册地址"
                placeholder-class="place" />
            </view>
            <view class="company-item" v-if="params.invoiceType == 2">
              <view>注册电话</view>
              <input
                v-model="params.companyPhone"
                placeholder="请填写注册电话"
                placeholder-class="place" />
            </view>
            <view class="company-item" v-if="params.invoiceType == 2">
              <view>开户银行</view>
              <input
                v-model="params.bankName"
                placeholder="请填写开户银行"
                placeholder-class="place" />
            </view>
            <view class="company-item" v-if="params.invoiceType == 2">
              <view>银行账户</view>
              <input
                v-model="params.bankNo"
                placeholder="请填写银行账户"
                placeholder-class="place" />
            </view>
          </view>
        </block>

        <view class="invoice-bottom" @click="doConfirm()">
          <view class="btn flex-center">立即申请</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: "invoice-pop",
  // props: {
  // 	isOrder: {
  // 		type: Boolean,
  // 		default: false
  // 	}
  // },
  data() {
    return {
      showFapiao: false,
      params: {
        invoiceStatus: 0,
        invoiceType: 1, //发票类型：1普通 2专用
        titleType: 2, //抬头类型：1 个人 2-公司
        title: "", //公司名称
        shibiema: "", //识别码
        companyAddress: "", //注册地址
        companyPhone: "", //注册电话
        bankName: "", //开户银行
        bankNo: "", //银行账户
      },
    };
  },

  created() {
    // console.log(this.showFapiao, '发票')
    // if (this.$props.isOrder == true) {
    // 	this.showFapiao = true
    // }

    let fapiao = uni.getStorageSync("fapiao_info");
    if (fapiao) {
      this.params.title = fapiao.title;
      this.params.shibiema = fapiao.shibiema;
      this.params.companyAddress = fapiao.companyAddress;
      this.params.companyPhone = fapiao.companyPhone;
      this.params.bankName = fapiao.bankName;
      this.params.bankNo = fapiao.bankNo;
    }
  },
  methods: {
    init() {
      this.showFapiao = true;
    },
    typeChange(type) {
      this.params.titleType = type;
      this.params.title = "";
    },
    pupiaoClick() {
      this.params.invoiceStatus = 1;
      this.params.invoiceType = 1;
    },
    zhuanpiaoClick() {
      this.params.invoiceStatus = 1;
      this.params.invoiceType = 2;
    },
    doConfirm() {
      if (this.params.invoiceStatus == 1) {
        if (this.params.invoiceType == 1) {
          //普通发票
          if (this.params.titleType == 1) {
            //如果是个人
            if (!this.params.title) {
              this.$alert("请填写“个人”或您的姓名");
              uni.setStorageSync("fapiao_info", this.params);
              return;
            }
          } else {
            if (!this.params.title) {
              this.$alert("请填写单位名称");
              return;
            }
            if (!this.params.shibiema) {
              this.$alert("请填写纳税人识别码");
              return;
            }
            this.params.companyAddress = "";
            this.params.companyPhone = "";
            this.params.bankName = "";
            this.params.bankNo = "";
            uni.setStorageSync("fapiao_info", this.params);
          }
        }
        if (this.params.invoiceType == 2) {
          if (!this.params.title) {
            this.$alert("请填写单位名称");
            return;
          }
          if (!this.params.shibiema) {
            this.$alert("纳税人识别码");
            return;
          }
          if (!this.params.companyAddress) {
            this.$alert("请填写注册地址");
            return;
          }
          if (!this.params.companyPhone) {
            this.$alert("请填写注册电话");
            return;
          }
          if (!this.params.bankName) {
            this.$alert("请填写开户银行");
            return;
          }
          uni.setStorageSync("fapiao_info", this.params);
        }
      } else {
        this.params = {};
        this.params.invoiceStatus = 0;
      }
      this.showFapiao = false;
      this.$emit("confirm", this.params);
    },
    openPop() {},
    closePop() {
      this.show = false;
    },
    close_pop() {
      this.show = false;
    },
  },
};
</script>

<style lang="scss">
.yue-hexiao-modal .input-box input {
  height: 112rpx;
}

.yue-hexiao-modal .u-input__content {
  height: 112rpx;
}

.yue-hexiao-modal .u-input__content__field-wrapper__field {
  height: 112rpx;
}
</style>

<style lang="scss" scoped>
::v-deep .u-popup__content {
  // border-radius: 32rpx 32rpx 32rpx 32rpx;
  background: transparent;
}

::v-deep .u-input__content__field-wrapper__field {
  height: 112rpx;
}

.fapiao-box {
  height: 92rpx;
  line-height: 92rpx;
  background: #ffffff;
  margin-top: 16rpx;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  > text {
    font-weight: bold;
    font-size: 28rpx;
    color: #222222;
  }

  .fapiao-right {
    image {
      width: 14rpx;
      height: 24rpx;
      margin-left: 24rpx;
    }

    text {
      font-size: 28rpx;
      color: #000000;
    }
  }
}

.pay_type {
  margin-top: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 28rpx;
  color: #222222;
  width: 686rpx;
  height: 92rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  padding: 26rpx 24rpx;

  .pay_type_right {
    display: flex;
    align-items: center;

    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
}

.invoice-ctx {
  position: relative;
}

.fapiao-poup {
  padding: 22rpx 32rpx 220rpx 32rpx;
  min-height: 800rpx;
  background: #fff;

  .title {
    font-size: 32rpx;
    color: #000000;
    text-align: center;
    font-weight: bold;
  }

  .fapiao-type {
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    text {
      &:nth-child(1) {
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
      }

      &:nth-child(2) {
        font-size: 20rpx;
        color: #000000;
      }
    }
  }

  .type-list {
    display: flex;
    margin-top: 18rpx;

    .type-item {
      width: 218rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      background: #f6f6f6;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-size: 24rpx;
      color: #000000;
      margin-right: 16rpx;

      &:nth-child(3n) {
        margin-right: 0;
      }
    }

    .active {
      width: 218rpx;
      height: 64rpx;
      background: #f49c0d;
      box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      color: #ffffff;
    }
  }

  .fapiao-taitou {
    margin-top: 34rpx;
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
  }

  .taitou-box {
    display: flex;
    align-items: center;
    margin-top: 18rpx;

    .taitou {
      width: 218rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      background: #f6f6f6;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      margin-right: 16rpx;
      font-size: 24rpx;
      color: #000000;
    }

    .active {
      width: 218rpx;
      height: 64rpx;
      background: #f49c0d;
      box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      color: #ffffff;
    }
  }

  .personal {
    margin-top: 34rpx;
    display: flex;
    align-items: center;

    text {
      font-weight: 400;
      font-size: 24rpx;
      color: #000000;
      margin-right: 40rpx;
    }

    .place {
      font-size: 24rpx;
      color: #aeaeae;
    }

    input {
      flex: 1;
      font-size: 24rpx;
      color: #aeaeae;
    }
  }

  .company {
    margin-top: 34rpx;

    .company-item {
      display: flex;
      align-items: center;
      margin-bottom: 28rpx;
      font-size: 24rpx;

      view {
        min-width: 200rpx;
      }

      input {
        flex: 1;
      }
    }
  }

  .invoice-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16rpx 32rpx;
    box-shadow: 0rpx -8rpx 20rpx 2rpx rgba(0, 0, 0, 0.06);

    .btn {
      width: 100%;
      height: 80rpx;
      background: #f49c0d;
      border-radius: 44rpx 44rpx 44rpx 44rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}
</style>
